import React, { Component, Fragment } from "react";
import { openWebView } from "@tools/native/navigate";
import { Carousel } from "antd-mobile";
import { refresh } from "@component/scroll/index2";
import "./index.scss";

/**公共banner组件 */
class Banner extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	handleLink = (value, sensorsType, bannerIndex) => {
		if (value.link) {
			if (value.targetArea === 0) {
				//内部
				this.props.history.push(value.link);
			} else if (value.targetArea === 1) {
				openWebView({ url: value.link });
			} else if (value.targetArea == "2") {
				this.props.history.push({
					pathname: "/iframeAgreements",
					state: {
						src: value.link,
						title: ""
					}
				});
			}
		}
	};
	render() {
		const { bannerList = [], sensorsType = "", ...props } = this.props;
		return (
			<div className="component-banner-old" {...props}>
				{bannerList.length > 0 && (
					<Fragment>
						{bannerList.length === 1 ? (
							<img
								onClick={() => this.handleLink(bannerList[0], sensorsType, 0)}
								src={bannerList[0].imgUrl}
							/>
						) : (
							<Carousel
								className="my-carousel"
								autoplay={true}
								infinite
								dotStyle={{
									width: ".12rem",
									height: ".12rem",
									background: "#fff",
									opacity: 0.5
								}}
								dotActiveStyle={{
									borderRadius: ".12rem",
									width: ".24rem",
									height: ".12rem",
									background: "#fff"
								}}
							>
								{bannerList.map((item, index) => {
									return (
										<img
											onLoad={refresh}
											src={item.imgUrl}
											key={item.imgUrl}
											onClick={() => this.handleLink(item, sensorsType, index)}
										/>
									);
								})}
							</Carousel>
						)}
					</Fragment>
				)}
			</div>
		);
	}
}

export default Banner;
